<template>
  <div class="notice-list">
    <el-card v-if="loading" class="loading-card">
      <el-spin />
    </el-card>

    <el-card v-else>
      <div v-for="(notice, index) in noticeList" :key="notice.noticeId" class="notice-item">
        <el-card class="notice-card">
          <div class="notice-header">
            <h3>{{ notice.noticeTitle }}</h3>
            <span class="create-time">{{ formatTime(notice.createTime) }}</span>
          </div>
          <div class="notice-content">
            <p>{{ notice.noticeContent }}</p>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {listNotice} from "@/api/system/notice.js";

const loading = ref(true);
const noticeList = ref([]);
const total = ref(0);
const queryParams = ref({ pageNum: 1, pageSize: 10 });

onMounted(() => {
  getList();
});

function getList() {
  loading.value = true;
  listNotice(queryParams.value).then(response => {
    noticeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 格式化时间
const formatTime = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

<style scoped lang="scss">
.notice-list {
  padding: 20px;
}

.notice-item {
  margin-bottom: 20px;
}

.notice-card {
  padding: 20px;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.notice-header h3 {
  margin: 0;
}

.create-time {
  font-size: 12px;
  color: #999;
}

.notice-content p {
  line-height: 1.5;
  font-size: 14px;
  color: #333;
}
</style>
